
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="800" height="800"></canvas>
</body>
<script id = "vertex-shader" type="notjs">
    // 顶点位置
    attribute vec4 a_position;
    // 顶点法向量
    attribute vec4 a_normal;
    // 图片位置
    attribute vec2 a_texture;
    // 相机位置 相机不动
    uniform vec3 u_camera_pos;
    
    // mvp矩阵
    uniform mat4 u_mvp_matrix4;
    //模型矩阵
    uniform mat4 u_model_matrix4;
    // 法向量的变换矩阵
    uniform mat4 u_normal_matrix;
    
    // 光的位置
    uniform vec3 u_point_light_pos;
    uniform vec3 u_ambient_light_pos;
    
    // 高光颜色
    uniform vec3 u_specular_col;
    uniform vec3 u_light_col;
    
    // 点光源区域限制
    uniform float u_limit;          
    // 高光系数
    uniform float u_shiness;
    
    // 传入片源的计算结果
    varying vec3 v_point_light;
    // varying vec3 v_ambient_light;
    varying vec3 v_specular_light;
    varying vec2 v_texture;
    void main() {
        gl_Position = u_mvp_matrix4 * a_position;
        
        // 法向量和光向量
        vec3 normal = normalize(vec3(u_normal_matrix * a_normal)); 
        vec3 vertex_position = vec3(u_model_matrix4 * a_position);
        vec3 light_direction = normalize(u_point_light_pos - vertex_position);

        // 半程向量
        vec3 suface2_camera = normalize(u_camera_pos - vertex_position);
        vec3 half_vector = normalize(suface2_camera + light_direction);
        float half_normal_dis = dot(normal, half_vector);

        float light = dot(normal, light_direction);
        float specular = 0.0;
        if (light > 0.0) {
            specular = pow(half_normal_dis, u_shiness);
        }

        v_point_light = light * u_light_col;
        // v_ambient_light = u_ambient_light_pos;
        v_specular_light = specular * u_specular_col;
        v_texture = a_texture;
    }
</script>
<script id = "fragment-shader" type="notjs">
    precision mediump float;

    varying vec3 v_point_light;
    varying vec3 v_specular_light;
    // varying vec3 v_ambient_light;
    
    varying vec2 v_texture;
    uniform sampler2D u_sampler;
    
    void main() {
        vec3 textCol = texture2D(u_sampler, v_texture).rgb;
        vec3 col =  textCol * v_point_light + v_specular_light;
        gl_FragColor = vec4(col, 1);
    }
</script>
<script src="../lib/cuon-matrix.js"></script>
<script src="../utils.js"></script>
<script src="./hightlight.js"></script>
</html>
